<template>
  <div class="GoodsDetial">
    <!-- 顶部 -->
    <van-nav-bar
      title="传智播客.黑马程序员Vue.js"
      style="background-color: #26a2ff; margin-bottom: 5px"
    />
    <!-- 头部 -->
    <div class="header">
      <van-nav-bar
        title="商品信息页"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      >
        <template #right>
          <van-icon
            name="wap-home-o"
            size="18"
            @click="$router.push({ name: 'Home' })"
          />
        </template>
      </van-nav-bar>
    </div>

    <div class="all">
      <!-- 轮播图 -->
      <div class="allshadow">
        <div class="carousel">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in imgList" :key="index">
              <img :src="item.src" alt="" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="allshadow">
        <div class="productInfo">
          <h1>{{ this.productList.length > 0 && productList[0].title }}</h1>
          <div class="info">
            <p>
              <span
                >市场价：<i
                  >￥{{
                    this.productList.length > 0 && productList[0].market_price
                  }}</i
                ></span
              >
              <span
                >销售价：<i
                  >￥{{
                    this.productList.length > 0 && productList[0].sell_price
                  }}</i
                ></span
              >
            </p>

            <div class="count">
              <span>购买数量：</span>
              <van-stepper
                v-model="value"
                @change="countAdd"
                disable-input
                input-width="40px"
                button-size="38px"
                :max="
                  this.productList.length > 0
                    ? this.productList[0].stock_quantity
                    : ''
                "
              />
            </div>

            <div class="btn">
              <van-button type="info" class="infobtn">立即购买</van-button>
              <van-button type="danger" class="dangerbtn" @click="addCart"
                >加入购物车</van-button
              >
              <van-goods-action-icon
                icon="cart-o"
                :badge="badgevalue"
                text="购物车"
                @click="$router.push('/CarList')"
              />
            </div>
          </div>
        </div>
      </div>
      <!-- 商品参数 -->
      <div class="allshadow">
        <div class="productParams">
          <h1>商品参数</h1>
          <div class="params">
            <p>
              商品编号：{{
                this.productList.length > 0 && productList[0].goods_no
              }}
            </p>
            <p>
              库存情况：{{
                this.productList.length > 0 && productList[0].stock_quantity
              }}
            </p>
            <p>
              上架时间：{{
                this.productList.length > 0 &&
                productList[0].add_time | dateformat
              }}
            </p>
          </div>
        </div>
      </div>

      <!-- 按钮组 -->
      <div class="allshadow">
        <div class="btns">
          <van-button
            plain
            type="info"
            @click="$router.push({ path: `/GoodsDesc/${$route.params.id}` })"
            >图文介绍</van-button
          >
          <van-button
            plain
            type="danger"
            @click="$router.push({ path: `/goodscomment/${$route.params.id}` })"
            >商品评论</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getgoodsInfoById, getcarouselById } from "@/apis/productDisplay";
import { dateformat } from "@/utils/filteror";
import bus from "../../utils/Eventbus";
export default {
  data() {
    return {
      imgList: [],
      value: 1,
      productList: [],
      productLocal: [],
      badgevalue: 0,
    };
  },
  async mounted() {
    let id = this.$route.params.id;
    //   轮播图
    let Imgres = await getcarouselById(id);
    console.log(Imgres);
    this.imgList = Imgres.data.message;

    // 商品信息
    let productRes = await getgoodsInfoById(id);
    console.log(productRes);
    this.productList = productRes.data.message;

    this.productLocal = JSON.parse(localStorage.getItem("productList")) || [];
    console.log(this.productLocal);
    this.badgevalue = this.productLocal.length;
  },
  filters: {
    dateformat,
  },
  methods: {
    countAdd() {
      if (this.value == this.productList[0].stock_quantity) {
        this.$toast.fail("已超出最大库存量");
      }
    },
    addCart() {
      console.log(this.productLocal);
      // 将id和value值存到本地存储哪里
      // this.productLocal;
      // 改造数据
      let list = { id: this.$route.params.id, cou: this.value };
      // 利用过滤，如果id已经存在，则删除
      this.productLocal.filter((v, i) => {
        if (v.id == list.id) {
          bus.$emit("subtract");
          this.productLocal.splice(i, 1);
        }
      });
      console.log(this.productLocal);
      console.log(this.productLocal, this.productLocal.length);

      bus.$emit("sub");
      // 添加到存储
      this.$toast.success("加入购物车成功");

      this.productLocal.unshift(list);
      localStorage.setItem("productList", JSON.stringify(this.productLocal));
    },
  },
  watch: {
    productLocal: {
      handler() {
        if (JSON.parse(localStorage.getItem("productList"))) {
          this.badgevalue = this.productLocal.length;
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__title {
  color: #fff;
}
.header {
  /deep/ .van-nav-bar__title {
    color: #1989fa;
  }
}

/deep/ .van-nav-bar {
  background-color: #f7f7f7;
}

.all {
  padding: 10px;
  .allshadow {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    margin-bottom: 10px;
    // 轮播
    .carousel {
      border: 1px solid #ccc;
      .my-swipe .van-swipe-item {
        color: #fff;
        text-align: center;
        background-color: #fff;
        img {
          width: 100%;
          height: 250/360 * 100vw;
        }
      }
    }
    // 商品信息
    .productInfo {
      h1 {
        // text-align: center;
        color: #007bc9;
        font-size: 20/360 * 100vw;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15/360 * 100vw;
        padding-top: 8/360 * 100vw;
        line-height: 25/360 * 100vw;
      }
      .info {
        padding: 20/360 * 100vw 15/360 * 100vw;
        p {
          font-size: 14/360 * 100vw;
          color: #666;
          margin-bottom: 15/360 * 100vw;
          span:nth-child(1) {
            margin-right: 20/360 * 100vw;
            i {
              text-decoration: line-through;
            }
          }
          span:nth-child(2) {
            i {
              color: #b3453a;
              font-size: 18/360 * 100vw;
            }
          }
        }
        .count {
          font-size: 14/360 * 100vw;
          display: flex;
          align-items: center;
          color: #666;
          span {
            margin-right: 20/360 * 100vw;
          }
          /deep/.van-stepper__minus {
            background-color: #fff;
            border: 1px solid #ccc;
          }
          /deep/.van-stepper__plus {
            background-color: #fff;
            border: 1px solid #ccc;
          }
          /deep/.van-stepper__input {
            background-color: #fff;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            margin: 0;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          margin-top: 10/360 * 100vw;
          .van-button--info {
            border-radius: 5px;
          }
          .van-button--danger {
            border-radius: 5px;
          }
          .infobtn {
            font-size: 12/360 * 100vw;
            margin-right: 10/360 * 100vw;
          }
          .dangerbtn {
            font-size: 12/360 * 100vw;
          }
          .van-goods-action-icon {
            margin-left: 10/360 * 100vw;
          }
        }
      }
    }
    // 商品参数
    .productParams {
      h1 {
        padding-top: 8/360 * 100vw;
        font-size: 16/360 * 100vw;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15/360 * 100vw;
      }
      .params {
        padding: 20/360 * 100vw 15/360 * 100vw 20/360 * 100vw 30/360 * 100vw;
        p {
          &:first-child {
            padding-top: 0;
          }
          padding-top: 8/360 * 100vw;
          font-size: 14/360 * 100vw;
          color: #666;
        }
      }
    }
    // 按钮组
    .btns {
      .van-button--plain.van-button--info {
        width: 100%;
        font-size: 12/360 * 100vw;
        border-radius: 5px;
        margin-bottom: 30/360 * 100vw;
      }
      .van-button--plain.van-button--danger {
        width: 100%;
        font-size: 12/360 * 100vw;
        border-radius: 5px;
      }
    }
  }
}
</style>
